<template>
  <ex-dialog width="50%" class="ex-diolog" title="审核" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose">
    <div class="main">
      <div class="from_box">
        <div class="from_box_l">店铺名称：</div>
        <div class="from_box_r">{{info.shopName}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">团购名称：</div>
        <div class="from_box_r">{{info.name}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">活动时间：</div>
        <div class="from_box_r">{{info.activityStartTime}} 至 {{info.activityEndTime}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">使用时间：</div>
        <div class="from_box_r">{{info.useStartTime}} 至 {{info.useEndTime}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">商品库存：</div>
        <div class="from_box_r">{{info.stock}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l" style="padding-top: 2px">活动是否启用：</div>
        <div class="from_box_r">
          <el-switch v-model="info.enableStatus" active-value="1" inactive-value="2" active-text="启用" inactive-text="关闭"
            :disabled="true"></el-switch>
        </div>
      </div>
      <div class="from_box">
        <div class="from_box_l">限购：</div>
        <div class="from_box_r" v-if="info.limitType==1">不限购</div>
        <div class="from_box_r" v-if="info.limitType==2">{{info.limitCount}}</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">活动价格：</div>
        <div class="from_box_r">{{info.grouponPrice}}元</div>
      </div>
      <div class="from_box">
        <div class="from_box_l">原价：</div>
        <div class="from_box_r">{{info.originalPrice}}元</div>
      </div>
      <div class="el_table_box">
        <div class="el_table_box_h">
          <div class="el_table_box_h_title">产品详情</div>
        </div>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="序号" type="index" width="64px" />
          <el-table-column prop="productName" label="产品名称"> </el-table-column>
          <el-table-column prop="productNum" label="产品数量"> </el-table-column>
        </el-table>
      </div>
      <div class="from_box">
        <div class="from_box_l">使用方式：</div>
        <div class="from_box_r">到店核销</div>
      </div>
      <div class="from_box">
        <div class="from_box_l" style="padding-top: 3px">使用规则：</div>
        <div class="from_box_r" style="line-height: 25px">
          {{info.useRule}}
        </div>
      </div>
      <div class="from_box">
        <div class="from_box_l">商品相册：</div>
      </div>
      <div class="carousel_box" v-if="commodityImg.length != 0">
        <el-carousel trigger="hover" height="222px" :autoplay="true">
          <el-carousel-item v-for="(item, index) in commodityImg" :key="index">
            <el-image class="swiper_img" :src="item" fit="cover"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <div class="from_box">
        <div class="from_box_l">图文详情：</div>
      </div>
      <div class="carousel_box_two" v-if="detailImg.length != 0">
        <div class="phone_box" v-for="(item, indexs) in detailImg" :key="indexs">
          <el-image class="swiper_img" :src="item" fit="cover"></el-image>
        </div>
      </div>
    </div>
    <div class="button_box">
      <el-button type="primary" :loading="AgreeDisable" @click="grouponAgree">审核通过</el-button>
      <el-button type="danger" @click="refuse" :loading="refuseLoading">拒绝通过</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
  // components
  import Loading from "@/components/Loading/index";
  // api
  import {
    getInfo,
    grouponAgree,
    grouponRefuse
  } from "@/api/operateActive";

  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: String,
    },
    data() {
      return {
        tableData: [],
        delivery: true,
        commodityImg: [], //商品相册
        detailImg: [], //图文详情
        info: {},
        AgreeDisable: false,
        refuseLoading: false,
      };
    },
    computed: {},
    created() {
      this.getInfo()
    },
    methods: {
      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
        // this.$refs[formName].resetFields();
      },
      getInfo() { //获取商家团购信息详情
        const params = {
          id: this.id
        };
        getInfo(params).then((res) => {
          this.info = res.result
          this.tableData = JSON.parse(res.result.productDetail)
          this.commodityImg = res.result.projectList
          this.detailImg = res.result.detailList
        });
      },
      grouponAgree() { //审核通过
        const params = {
          id: this.id
        };
        this.AgreeDisable = true
        grouponAgree(params).then((res) => {
            this.$message({
              type: "success",
              message: "审核成功",
            });
            this.AgreeDisable = false
            this.handleClose()
            this.$emit('success')
          })
          .finally(() => {
            this.AgreeDisable = false;
          });
      },
      refuse() { //拒绝
        this.$prompt("请输入拒绝原因", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            inputPattern: /\S/,
            inputErrorMessage: "请输入拒绝原因",
          })
          .then(({
            value
          }) => {
            const params = {
              id: this.id,
              reasons: value
            };
            this.refuseLoading = true
            grouponRefuse(params).then((res) => {
                this.$message({
                  type: "success",
                  message: "已拒绝",
                });
                this.handleClose()
                this.refuseLoading = false
                this.$emit('success')
              })
              .finally(() => {
                this.refuseLoading = false;
              });
          })
          .catch(() => {
            //   this.$message({
            //     type: "info",
            //     message: "取消输入",
            //   });
          });
      },
    },
  };

</script>
<style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }

    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }

  .main {
    padding: 20px 20px;
  }

  .from_box {
    display: flex;
    margin-bottom: 20px;
  }

  .from_box_l {
    width: 110px;
    color: #606266;
    font-size: 14px;
    font-weight: bold;
  }

  .from_box_r {
    color: #333;
    font-size: 15px;
    flex: 1;
  }

  .el_table_box {
    padding: 0 20px 40px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .el_table_box_h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 14px;
  }

  .el_table_box_h_title {
    border-left: 4px solid #ff9300;
    padding-left: 4px;
  }

  .carousel_box {
    width: 400px;
    margin-bottom: 20px;
  }

  .swiper_img {
    width: 100%;
    height: 100%;
  }

  .carousel_box_two {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .phone_box {
    width: 100px;
    height: 100px;
    margin: 0 10px 10px 0;
  }

  .button_box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
  }

</style>
